<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title><style type="text/css" >
    html {
        background: url("/img/bg.png") no-repeat center center fixed;
        background-size: cover;
    }
    body {
        text-align: center;
    }
    h2 {
        margin-top: 30px;
        color: white;
    }
</style>
    <link rel="stylesheet" type="text/css" href="/css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/themes/icon.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
    <script src="/js/jquery.cookie.js"></script>
</head>
<body>
<h2 id="project_name">项目名</h2>
<center>
    <table id="dg_task" align="center" class="easyui-datagrid" title="任务列表" style="width: 700px;height:auto"
           data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb_task',
				onClickRow: onClickRowTask"
           url="/task/tasksOfProject.do"
           rownumbers="true" pagination="true">
        <thead>
        <tr>
            <th data-options="field:'id',width:80">任务编号</th>
            <th data-options="field:'name',width:200,
                      editor:{
                              type:'textbox',
                              options:{
                                required:true
                              }
                      }">任务名称</th>
            <th data-options="field:'createDate',width:100,
                      editor:{
                              type:'datebox',
                              options:{
                                required:true
                              }
                      }">创建日期</th>
            <th data-options="field:'priority', width:80,editor:'textbox'">优先级</th>
            <th data-options="field:'status', width:100,editor:'textbox'">状态</th>
            <th data-options="field:'employeeId', width:100,
                              formatter:function(value,row){
							      return row.employeeName;
						      },
                      editor:{
                              type:'combobox',
                              options:{
                                valueField:'employeeId',
                                textField:'employeeName',
                                method: 'get',
                                url:'/employee/getNames.do',
                                required:true
                              }
                      }">负责人</th>
        </tr>
        </thead>
    </table>
</center>
<div id="tb_task" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="appendTask()">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeitTask()">删除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="acceptTask()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="rejectTask()">还原</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChangesTask()">GetChanges</a>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var projectName = $.cookie('projectName');
        $("#project_name").text(projectName);
    });
    $('#dlg').dialog('close');
    var editIndexTask = undefined;
    var delTask = new Array();
    function endEditingTask(){
        if (editIndexTask == undefined){return true}
        if ($('#dg_task').datagrid('validateRow', editIndexTask)){
            var ed = $('#dg_task').datagrid('getEditor', {index:editIndexTask,field:'employeeId'});
            var name = $(ed.target).combobox('getText');
            $('#dg_task').datagrid('getRows')[editIndexTask]['employeeName'] = name;
            $('#dg_task').datagrid('endEdit', editIndexTask);
            editIndexTask = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickRowTask(index){
        if (editIndexTask != index){
            if (endEditingTask()){
                $('#dg_task').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndexTask = index;
            } else {
                $('#dg_task').datagrid('selectRow', editIndexTask);
            }
        }
    }
    function appendTask(){
        if (endEditingTask()){
            $('#dg_task').datagrid('appendRow',{status:"初始创建"});
            editIndexTask = $('#dg_task').datagrid('getRows').length-1;
            $('#dg_task').datagrid('selectRow', editIndexTask)
                    .datagrid('beginEdit', editIndexTask);
        }
    }
    function removeitTask(){
        if (editIndexTask == undefined){return}
        var row = $('#dg_task').datagrid('getSelected');
        delTask.push(row.id);
        $('#dg_task').datagrid('cancelEdit', editIndexTask)
                .datagrid('deleteRow', editIndexTask);
        editIndexTask = undefined;
    }
    function acceptTask(){
        if (endEditingTask()){
            var rows = $('#dg_task').datagrid('getChanges');
            delRowsTask(delTask);
            postChangeTask(rows);
            $('#dg_task').datagrid('acceptChanges');
        }
    }
    function rejectTask(){
        $('#dg_task').datagrid('rejectChanges');
        editIndexTask = undefined;
    }
    function getChangesTask(){
        var rows = $('#dg_task').datagrid('getChanges');
        alert(rows.length+' rows are changed!');
    }
    function postChangeTask(rows){
        if(rows){
            var newRows = createPostsTask(rows);
            postRowsTask(newRows);
        }
    }
    function createPostsTask(rows){
        var newRows = new Array();
        for(var i = 0; i < rows.length; i++) {
            for(var j = 0; j < delTask.length; j++) {
                if(rows[i].id == delTask[j]) break;
            }
            if(j == delTask.length) newRows.push(rows[i]);
        }
        return newRows;
    }
    function postRowsTask(rows){
        if(rows) {
            $.ajax({
                type:"POST",
                contentType:"application/json",
                url:"/task/addOrUpdateTasks.do",
                data:JSON.stringify(rows),
                success:function(data){
                    var obj = eval('(' + data + ')');
                    if(obj.status != "success"){
                        alert(obj.msg);
                        rejectTask();
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status + ':' + textStatus);
                }
            });
        }
    }
    /**
     * 删除行
     * @param rows
     */
    function delRowsTask(rows){
        if(rows) {
            $.ajax({
                type:"POST",
                contentType:"application/json",
                url:"/task/delTasks.do",
                data:JSON.stringify(rows),
                success:function(data){
                    delTask = [];
                    var obj = eval('(' + data + ')');
                    if(obj.status != "success"){
                        alert(obj.msg);
                        rejectTask();
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status + textStatus);
                    delTask = [];
                }
            });
        }
    }
    function allPrpos ( obj ) {
        // 用来保存所有的属性名称和值
        var props = "" ;
        // 开始遍历
        for ( var p in obj ){ // 方法
            if ( typeof ( obj [ p ]) == " function " ){ obj [ p ]() ;
            } else { // p 为属性名称，obj[p]为对应属性的值
                props += p + " = " + obj [ p ] + " /t " ;
            } } // 最后显示所有的属性
        alert ( props ) ;
    }
</script>
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<div id="footer">
    <ul>
        <li>
            <div class="cell">
                <a href="/project/list.do">项目</a>
            </div>
        </li>
        <li>
            <div class="cell">
                <a href="/task/list.do">任务</a>
            </div>
        </li>
        <li>
            <div class="cell">
                <a href="/employee/manageEmployee.do">我的</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>